<template>
    <view class="seach" :class="{fousedBox:fousedBox}">
         <!-- 输入框 -->
         <view class="input-box">
             <input type="text" @focus="focused" />
             <text class="close" @click="closed">取消</text>
         </view>
         <!-- 搜索内容 -->
         <view class="content"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            fousedBox:false
        }
    },
    methods:{
        focused (){
            this.fousedBox=true
           const {windowHeight} = uni.getSystemInfoSync()
        //    console.log(windowHeight);
           this.$emit('seach',{
               pageHeight:windowHeight+'px'
           })
           
        },
        closed () {
             this.fousedBox=false
             this.$emit('seach',{
               pageHeight:'auto'
           })
        }
    }
}
</script>

<style lang="less">
// 搜索
.seach  {

	.input-box {
        display: flex;
		background-color: #eb4551;
		padding: 20rpx 15rpx;
		input{
            flex: 1;
            height: 60rpx;
			background-color: #fff;
			border-radius: 5rpx;
        }
        
    }
    .close {
            width: 100rpx;
            font-size: 30rpx;
            line-height: 60rpx;
            text-align: right;
            display: none;
        }
    .content {                  
         display: block;
    }
}
.fousedBox .input-box{
    background-color: #EFEFEF;
}
.fousedBox .content {
    position: absolute;
    top: 100rpx;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    z-index: 999;
    background-color: #fff;
}
.fousedBox .close {
    display: block; 
}
</style>
